<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title></title>
		<link rel="stylesheet" type="text/css" href="$!{basePath}/app/css/common.css"/>
        <!-- 引入播放器 css 文件 -->
        <link href="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.css" rel="stylesheet">
        <!-- 如需在IE8、9浏览器中初始化播放器，浏览器需支持Flash并在页面中引入 -->
        <!--[if lt IE 9]>
        <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/ie8/videojs-ie8.js"></script>
        <![endif]-->
        <!-- 如果需要在 Chrome Firefox 等现代浏览器中通过H5播放hls，需要引入 hls.js -->
        <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/lib/hls.min.0.8.8.js"></script>
        <!-- 引入播放器 js 文件 -->
        <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.min.js"></script>
        <script src="$!{basePath}/app/js/vue.min.js"></script>
        <script src="$!{basePath}/app/js/axios.min.js"></script>
        <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

        <script src="$!{basePath}/app/js/vue.min.js"></script>
        <script src="$!{basePath}/app/js/axios.min.js"></script>
        <!-- 示例 CSS 样式可自行删除 -->
		<style type="text/css">
			.con{
				width: 100%;
			}
			.tcp-skin{
				width: 100%;
			}
			.mycid{
				width: 100%;
				height: 200px;
				position: relative;
			}
			.con video{
				width: 100%;
				height: 100%;
			}
			.player-container-id-dimensions{
				height: 100%;
			}
            .online{
                width: 4px;
                height: 20px;
                background-color: red;
            }
            .title{
                display: flex;
                margin-top: 8px;
                margin-left: 6px;
            }
            .text{
                margin-left: 12px;
                font-width: 800;
            }
            .cont_text{
                width: 96%;
                margin: 0 auto;
            }
            .cont_text img {
                width: 100%
            }
            .context{
                width: 100%;
            }
            .context .text{
                width: 96%;
                padding: 0px 2%;
            }
            .my_img{
                width: 50%;
                background-color: #fff;
            }
            .left_yuan,.right_yuan{
                position: absolute;
                width: 10px;
                height: 20px;
                background-color: #e8e3d0;
            }
            .left_yuan{
                border-radius: 0 20px 20px 0;
                top: -10px;
                left: 0;
            }
            .right_yuan{
                border-radius: 20px 0 0 20px;
                top: -10px;
                right: 0;
            }
            .vidBg{
                background: url($!{basePath}/app/img/zice.jpg) no-repeat;
                background-size: 100% 100%;
                padding: 32% 0;
                width: 96%;
                display: flex;
                justify-content: center;
                margin: 12px auto;
            }
            .vidBg img{
                width: 100%;

            }
            .img_text{
                text-align: center;
                border-top: 1px solid #ccc;
                padding: 8px 0;
                position: relative;
            }
		</style>
    </head>
    <body>
        <!-- 设置播放器容器 -->
       <div class="con">
		<div class="mycid">
			 <video id="player-container-id" preload="auto" playsinline webkit-playsinline x5-playsinline></video>
		</div>
           <div class="cont">
               <div class="title">
                   <div class="online"></div>
                   <div class="text" >
                       <span>{{obj.courseName}}</span>
                   </div>
               </div>
               <div class="context">
                   <div v-if="isshow">
                       <img :src="obj.examQues.qrcode" alt="" style="width: 100%">
                   </div>
                   <div class="cont_text" v-html="obj.context"></div>
               </div>
           </div>
       </div>
        <!--
        注意事项：
        * 播放器容器必须为 video 标签
        * player-container-id 为播放器容器的ID，可自行设置
        * 播放器区域的尺寸请按需设置，建议通过 css 进行设置，通过css可实现容器自适应等效果
        * playsinline webkit-playsinline x5-playsinline 这几个属性是为了在标准移动端浏览器不劫持视频播放的情况下实现行内播放，此处仅作示例，请按需使用
        -->

    </body>
</html>
<script>
    var shareUrl = window.location.href;
    wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: '$!{appId}', // 必填，公众号的唯一标识
        timestamp: "$!{wx.timestamp}", // 必填，生成签名的时间戳
        nonceStr: "$!{wx.nonceStr}", // 必填，生成签名的随机串
        signature: "$!{wx.signature}",// 必填，签名，见附录1
        jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    });
    wx.ready(function(){
        var shareData = {
            title: '$!{course.courseName}', // 分享标题
            desc: '$!{course.opt1}', // 分享描述
            link: shareUrl, // 分享链接
            imgUrl: '$!{course.videoCoverUrl}', // 分享图标
        };
        wx.onMenuShareTimeline(shareData);
        wx.onMenuShareAppMessage(shareData);
        wx.onMenuShareQQ(shareData);
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，
        // 则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
    });
    wx.error(function(res){
        //alert("==============error" + res)
    });
    var app=new Vue({
        el:'.con',
        data:{
            uid:"",
            obj:{},
            isshow:false
        },
        mounted(){
            var videoId=this.getQueryVariable('videoId')
            this.id=this.getQueryVariable('id')
            if(this.id!=''){
                this.getdata()
            }
            var player = TCPlayer("player-container-id", { // player-container-id 为播放器容器ID，必须与html中一致
                fileID: videoId, // 请传入需要播放的视频fileID 必须
                appID: "1304379720", // 请传入点播账号的子应用appID 必须
                autoplay: false //是否自动播放
                //其他参数请在开发文档中查看
            });
        },
        methods:{
            getdata(){
              axios({
                  url:"$!{basePath}/system/back/poster/manage/getProductDetail",
                  method:"get",
                  params:{
                      id:this.id
                  }
              }).then((res)=>{
                  this.obj=res.data.obj;
                  if(this.obj.examQues != null) {
                    this.isshow=true
                  }
              })
            },
            getQueryVariable(variable){
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i=0;i<vars.length;i++) {
                    var pair = vars[i].split("=");
                    if(pair[0] == variable){return pair[1];}
                }
                return(false);
            }
        }
    })


</script>